<template>
    <div class="body">
        <el-card class="login-form-layout">
            <el-form
                :model="formData"
                :rules="Rules"
                ref="Form"
                label-width="100px"
                label-position="right">
                <div style="text-align: center">
                    <img :src="logo" style="width: 55px;height: 55px;">
                    <!--  <i class="el-icon-delete" style="width: 56px;height: 56px;color: #409EFF"></i> -->
                </div>
                <h2 class="login-title color-main">Mybatis-Mall</h2>
                <el-form-item label="用户名：" prop="accountMember">
                    <el-input name="accountMember"
                        type="text"
                        v-model="formData.accountMember"
                        placeholder="请输入用户名">
                        <span slot="prefix">
                            <i class="el-icon-user color-main"></i>
                        </span>
                    </el-input>
                </el-form-item>
                <el-form-item label="密码：" prop="password">
                    <el-input name="password"
                        type="password"
                        v-model="formData.password"
                        placeholder="请输入密码">
                        <span slot="prefix">
                            <i class="el-icon-lock color-main"></i>
                        </span>
                    </el-input>
                </el-form-item>
                <el-form-item label="确认密码：" prop="password1">
                    <el-input name="password1"
                        type="password"
                        v-model="formData.password1"
                        placeholder="请输入确认密码">
                        <span slot="prefix">
                            <i class="el-icon-lock color-main"></i>
                        </span>
                    </el-input>
                </el-form-item>
                <el-form-item label="邮箱：" prop="Email">
                    <el-input name="Email"
                        v-model="formData.Email "
                        placeholder="请输入邮箱">
                        <span slot="prefix">
                            <i class="el-icon-message color-main"></i>
                        </span>
                    </el-input>
                </el-form-item>
                <!-- <el-form-item label="姓名：" prop="name">
                    <el-input name="name"
                        v-model="formData.name"
                        placeholder="请输入姓名">
                        <span slot="prefix">
                            <i class="el-icon-user-solid color-main"></i>
                        </span>
                    </el-input>
                </el-form-item>
                <el-form-item label="电话：" prop="telenumber">
                    <el-input name="telenumber"
                        v-model="formData.telenumber"
                        placeholder="请输入电话">
                        <span slot="prefix">
                            <i class="el-icon-phone color-main"></i>
                        </span>
                    </el-input>
                </el-form-item>
                <el-form-item label="性别：" prop="gender">
                    <el-radio-group v-model="formData.gender">
                        <el-radio :label="'男'">男</el-radio>
                        <el-radio :label="'女'">女</el-radio>
                    </el-radio-group>
                </el-form-item> -->
                <el-form-item style="margin-bottom: 60px;text-align: center">
                    <el-button style="width: 45%" type="primary" :loading="loading" @click="handlerRegister">
                        注册
                    </el-button>
                    <el-button style="width: 45%" type="primary" @click="tologin">
                        去登录
                    </el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <img :src="bgp" class="login-center-layout">
    </div>
</template>

<script>
    import qs from 'qs'
    /* import LoginCenterBg from '@/images/login_center_bg.png' */
    import logo from '@/images/logo.png'
    import bgp from '@/images/bgp.png'
    export default {
        data () {
            const validateAccountMember = (rule, value, callback) => {
                const re = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
                if (value === '' || value === undefined || value === null) {
                    const e = new Error('请输入用户名(手机号)')
                    callback(e)
                } else if (!re.test(value)) {
                    const e = new Error('请输入正确用户名(手机号)')
                    callback(e)
                } else {
                    callback()
                }
            }
            const validatePassword = (rule, value, callback) => {
                if (value === '' || value === undefined || value === null) {
                    const e = new Error('请输入密码')
                    callback(e)
                } else {
                    callback()
                }
            }
            const validatePassword1 = (rule, value, callback) => {
                if (value === '' || value === undefined || value === null) {
                    const e = new Error('请输入验证密码')
                    callback(e)
                } else if (value !== this.formData.password) {
                    const e = new Error('两次密码不一致')
                    callback(e)
                } else {
                    callback()
                }
            }
            const validateName = (rule, value, callback) => {
                if (value === '' || value === undefined || value === null) {
                    const e = new Error('请输入姓名')
                    callback(e)
                } else {
                    callback()
                }
            }
            const validateTelenumber = (rule, value, callback) => {
                const re = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
                if (value === '' || value === undefined || value === null) {
                    const e = new Error('请输入电话')
                    callback(e)
                } else if (!re.test(value)) {
                    const e = new Error('请输入正确电话')
                    callback(e)
                } else {
                    callback()
                }
            }
            const validateGender = (rule, value, callback) => {
                if (value === '' || value === undefined || value === null) {
                    const e = new Error('请选择性别')
                    callback(e)
                } else {
                    callback()
                }
            }
            const validateEmail = (rule, value, callback) => {
                const re = /^[a-z0-9]+([._\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/
                if (value === '' || value === undefined || value === null) {
                    const e = new Error('请输入邮箱')
                    callback(e)
                } else if (!re.test(value)) {
                    const e = new Error('请输入正确邮箱')
                    callback(e)
                } else {
                    callback()
                }
            }
            return {
                formData: {
                    accountMember: '',
                    password: '',
                    password1: '',
                    Email: '',
                    name: '',
                    telenumber: '',
                    gender: ''
                },
                config: {
                    theme: 'success',
                    message: ''
                },
                // LoginCenterBg,
                bgp,
                logo,
                Rules: {
                    accountMember: [
                        {
                            required: true,
                            trigger: 'blur',
                            validator: validateAccountMember
                        }
                    ],
                    password: [
                        {
                            required: true,
                            trigger: 'blur',
                            validator: validatePassword
                        },
                        {
                            min: 3,
                            max: 6,
                            message: '长度在 3 到 6 个字符',
                            trigger: 'blur'
                        }
                    ],
                    password1: [
                        {
                            required: true,
                            trigger: 'blur',
                            validator: validatePassword1
                        }
                    ],
                    Email: [
                        {
                            required: true,
                            trigger: 'blur',
                            validator: validateEmail
                        }
                    ],
                    name: [
                        {
                            required: true,
                            trigger: 'blur',
                            validator: validateName
                        }
                    ],
                    telenumber: [
                        {
                            required: true,
                            trigger: 'blur',
                            validator: validateTelenumber
                        }
                    ],
                    gender: [
                        {
                            required: true,
                            trigger: 'blur',
                            validator: validateGender
                        }
                    ]
                }
            }
        },
        created () {
        },
        methods: {
            tologin () {
                this.$router.push({ name: 'login' })
            },
            handlerRegister () {
                this.$refs.Form.validate(valid => {
                    if (valid) {
                        this.register()
                    } else {
                        return false
                    }
                })
            },
            async register () {
                this.$http.post('/register/user', qs.stringify(this.formData)).then(res => {
                    if (res.data.result || res.data === true) {
                        this.isLogin = true
                        this.config.theme = 'success'
                        this.config.message = '注册成功,即将跳转至登录页面'
                        this.$bkMessage(this.config)
                        this.$router.push({ name: 'login' })
                    } else {
                        this.isLogin = false
                        this.config.theme = 'error'
                        this.config.message = '注册失败'
                        this.$bkMessage(this.config)
                    }
                })
            }
        }
    }
</script>

<style scoped>
  .login-form-layout {
    position: absolute;
    left: 0;
    right: 0;
    width: 450px;
    margin: 140px auto;
    border-top: 10px solid #409EFF;
    opacity: 0.92;
  }

  .login-title {
    text-align: center;
  }

  .login-center-layout {
    background: #409EFF;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    margin-top: 200px;
  }
</style>
